<template>
    <el-dialog
            :title="editType == 'edit' ? '修改角色' : '新增角色' "
            :close-on-click-Model="false"
            :visible.sync="showRoleModel"
            @close="cancel"
            width="850px"
    >
        <div class="roleWarps" v-loading="loading" :element-loading-text="loadingText">
            <el-form
                    inline
                    ref="formDataRefs"
                    :model="dialogForm"
                    :rules="dialogFormRule"
                    label-width="140px"
                    label-position="left"
            >
                <el-form-item label="角色名称:" prop="roleName">
                    <el-input v-model="dialogForm.roleName" size="small" placeholder="请填写角色名称!"></el-input>
                </el-form-item>
                <el-form-item label="角色状态:" prop="state">
                    <el-radio-group v-model="dialogForm.state" size="small">
                        <el-radio label="0">正常</el-radio>
                        <el-radio label="1">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input
                            v-model="dialogForm.remark"
                            :maxlength="20"
                            style="width: 100%;"
                            placeholder="请输入备注!"
                            type="textarea"
                            resize="none"
                            :autosize="{minRows:4,maxRows:4}"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="right_roles">
                <h4>菜单权限</h4>
                <div class="tree_warps_overscroll">
                    <el-tree
                            ref="treeData"
                            node-key="menuId"
                            :default-checked-keys="menuList"
                            :data="menuList"
                            show-checkbox
                            :props="defaultProps"
                    ></el-tree>
                </div>
            </div>
        </div>
        <div slot="footer" class="footer_dialog">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" @click="saveRole">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { _saveRole, _editRole } from '_api'
    import vueState from '@lib/vuexState'

    export default {
        props: {
            roleId: {
                type: String,
                default: '',
            }
        },

        mixins: [vueState],

        data() {
            return {
                showRoleModel: false,
                editType: 'edit',
                loading: false,
                loadingText: '保存中...',
                dialogForm: {
                    roleName: '',
                    state: '0',
                    remark: '',
                    menuIdList: [],
                },
                dialogFormRule: {
                    roleName: [{ required: true, message: '角色名称必填' }],
                    state: [{ required: true, message: '角色状态必填' }],
                },
                menuList: [],
                defaultProps: {
                    children: 'list',
                    label: 'menuName',
                }
            }
        },

        watch: {
            showRoleModel: {
                handler(val) {
                    if (val) this.getRole()
                },
                immediate: true
            }
        },

        created() {
            this.getAllMenus()
        },

        methods: {
            //保存菜单
            saveRole() {
                this.$refs.formDataRefs.validate(async (valid) => {
                    if (valid) {
                        let data = JSON.parse(JSON.stringify(this.dialogForm))
                        data.menuIdList.splice(0)
                        let datas = this.$refs.treeData.getCheckedNodes()
                        let datad = this.$refs.treeData.getHalfCheckedNodes()
                        for (let i = 0; i < datas.length; i++) {
                            data.menuIdList.push(datas[i].menuId)
                        }
                        for (let i = 0; i < datad.length; i++) {
                            data.menuIdList.push(datad[i].menuId)
                        }

                        this.loading = true
                        this.loadingText = '保存角色中...'
                        let res
                        // let res = (await this.$http.post('/cms/auth/role' + this.urlBase, data))
                        if (this.editType == 'edit') {
                            res = (await _editRole(data))
                        } else {
                            res = (await _saveRole(data))
                        }
                        this.loading = false
                        if (res && res.code == '0') {
                            this.$message.success('保存角色成功')
                            this.$emit('success', true)
                            this.cancel()
                        } else {
                            this.loading = false
                        }
                    }
                })
            },
            //查询菜单树
            async getAllMenus() {
                let res = (await this.$http.post('/cms/auth/menu/list'))
                if (res && res.code == 0) {
                    this.menuList = res.data.list
                }
            },
            //查询角色
            async getRole() {
                if (this.roleId) {
                    this.editType = 'edit'
                    this.loading = true
                    this.loadingText = '查询角色中...'
                    let res = (await this.$http.post('/cms/auth/role/info', this.roleId))
                    this.loading = false
                    if (res && res.code == 0) {
                        let datas = res.data
                        this.dialogForm = Object.assign(this.dialogForm, {
                            roleId: datas.roleId,
                            roleName: datas.roleName,
                            state: datas.status,
                            remark: datas.remark,
                        })
                        //取消所有包含父级的ID
                        this.$refs.treeData.setCheckedKeys([])
                        let allMenuStr = JSON.stringify(this.menuList)
                        let menuList = datas.menuIdList
                        if (menuList && menuList.length) {
                            for (let i = 0; i < menuList.length; i++) {
                                let pid = '"parentId":"' + menuList[i] + '"'
                                if (allMenuStr.indexOf(pid) != -1) {
                                    menuList.splice(i, 1)
                                    i--
                                }
                            }
                            this.$refs.treeData.setCheckedKeys(menuList)
                        }
                    }
                } else {
                    this.editType = 'add'
                    this.dialogForm = Object.assign(this.dialogForm, {
                        roleName: '',
                        state: '0',
                        remark: '',
                    })
                }
            },
            cancel() {
                this.showRoleModel = false
                this.loading = false
            }
        }
    }
</script>

<style lang="less" scoped>
    .roleWarps {
        display: flex;
        .right_roles {
            width: 300px;
            flex-shrink: 0;
            .tree_warps_overscroll {
                height: 360px;
                overflow-y: auto;
            }
        }
    }
</style>
